@extends('layouts.admin')
@section('style')
    <style type="text/css">
        .menu_children{display:none;}
    </style>
@endsection
@section('content')
<div class="admin_main">
    <div class="admin_header_fixed">
        <div class="admin_header clearfix">
            <div class="title"><i></i>角色授权</div>
            <div class="action">
                <b></b>
                <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-primary layui-btn-small " href="{{ url('role') }}">
                        <i class="fa fa-reply"></i> 返回列表
                    </a>
                </div>
            </div>
        </div>
    </div>
    <form class="layui-form" action="{{ url('role/'.$id.'/permission') }}" method="post">
        {{ csrf_field() }}
        <div class="layui-col-md4">
         <blockquote class="layui-elem-quote title">角色信息</blockquote>
         <div class="layui-form-item">
             <label class="layui-form-label">角色名称</label>
             <div class="layui-inline">
                 <input type="text" class="layui-input" value="{{ $role->display_name }}" disabled="">
             </div>
         </div>
        <div class="layui-form-item">
             <label class="layui-form-label">角色描述</label>
             <div class="layui-inline">
                 <textarea class="layui-textarea" readonly>{{ $role->description }}</textarea>
             </div>
        </div>
         <hr class="layui-bg-gray">
         <div class="layui-center">
             <a href="" class="layui-btn layui-btn-sm" lay-submit lay-filter="setPermission">
                 <i class="fa fa-plus-circle"></i> 提交角色授权
             </a>
         </div>
    </div>
    <div class="layui-col-md8">
        <div class="admin_base">
            <div id="menu_tree">
                @foreach($menus as $key => $menu)
                  <div class="menu_level menu_level_1 {{ !isset($menu['children'])?'no_child':'' }} ">
                    <div class="self clearfix" data-level="1">
                        <i class="lline"></i>
                        <span class="menu_info clearfix">
                            <i class="fa  {{ !isset($menu['children'])?'fa-minus-circle':'fa-plus-circle' }}  fa-lg left fa-icon"></i>
                            <span class="left"><input type="checkbox" data-parents="0" class="parent-checkbox-0" name="rights[]" value="{{ $menu['id'] }}" @if(in_array($menu['id'],$permissions)) checked @endif ></span>
                            <span class="menu_title left"> {{ $menu['title'] }}</span>
                            <span class="menu_id left">〖ID：{{ $menu['id'] }}〗</span>
                            <span class="left en-font">〖权限名称：{{ $menu['route_name'] }}〗</span>
                            @if(isset($menu['children'])) <span class="menu_child_count left">〖子节点数：{{ count($menu['children']) }}〗</span> @endif
                        </span>
                    </div>
                    @if(isset($menu['children']))
                      <div class="menu_children menu_children_1">
                        @foreach($menu['children'] as $menu1)
                            <div class="menu_level menu_level_2 {{ !isset($menu1['children'])?'no_child':'' }}">
                                <div class="self clearfix" data-level="2">
                                    <i class="lline"></i>
                                    <span class="menu_info clearfix">
                                        <span class="left"><input type="checkbox" data-parents="0,{{ $menu['id'] }}"  class="parent-checkbox-{{ $menu['id'] }}"  name="rights[]" value="{{ $menu1['id'] }}" @if(in_array($menu1['id'],$permissions)) checked @endif ></span>
                                        <i class="fa {{ !isset($menu1['children'])?'fa-minus-circle':'fa-plus-circle' }}   fa-lg left fa-icon"></i>
                                        <span class="menu_title left">{{ $menu1['title'] }}</span>
                                        <span class="menu_id left">〖ID：{{ $menu1['id'] }}〗</span>
                                        <span class="left en-font">〖权限名称：{{ $menu1['route_name'] }}〗</span>
                                        @if(isset($menu1['children']))
                                            <span class="menu_child_count left">〖子节点数：{{ count($menu1['children']) }}〗</span>
                                        @else
                                            <span class="left en-font">〖方法：{{ $menu1['actions'] }}〗</span>
                                        @endif
                                    </span>
                                </div>
                                @if(isset($menu1['children']))
                                    <div class="menu_children menu_children_2">
                                        @foreach($menu1['children'] as $menu2)
                                            <div class="menu_level menu_level_3 {{ !isset($menu2['children'])?'no_child':'' }}">
                                                <div class="self clearfix" data-level="3">
                                                    <i class="lline"></i>
                                                    <span class="menu_info clearfix">
                                                        <span class="left"><input type="checkbox" data-parents="0,{{ $menu['id'] }},{{ $menu1['id'] }}" class="parent-checkbox-{{ $menu1['id'] }}"  name="rights[]" value="{{ $menu2['id'] }}" @if(in_array($menu2['id'],$permissions)) checked @endif ></span>
                                                        <i class="fa {{ !isset($menu2['children'])?'fa-minus-circle':'fa-plus-circle' }}   fa-lg left fa-icon"></i>
                                                        <span class="menu_title left">{{ $menu2['title'] }}</span>
                                                        <span class="menu_id left">〖ID：{{ $menu2['id'] }}〗</span>
                                                        <span class="left en-font">〖权限名称：{{ $menu2['route_name'] }}〗</span>
                                                        @if(isset($menu2['children']))
                                                            <span class="menu_child_count left">〖子节点数：{{ count($menu2['children']) }}〗</span>
                                                        @else
                                                            <span class="left en-font">〖方法：{{ $menu2['actions'] }}〗</span>
                                                        @endif
                                                    </span>
                                                </div>
                                                @if(isset($menu2['children']))
                                                    <div class="menu_children menu_children_3">
                                                        @foreach($menu2['children'] as $menu3)
                                                            <div class="menu_level menu_level_4 no_child">
                                                                <div class="self clearfix" data-level="4">
                                                                    <i class="lline"></i>
                                                                    <span class="menu_info clearfix">
                                                                        <span class="left"><input type="checkbox" data-parents="0,{{ $menu['id'] }},{{ $menu1['id'] }},{{ $menu2['id'] }}" class="parent-checkbox-{{ $menu2['id'] }}" name="rights[]" value="{{ $menu3['id'] }}" @if(in_array($menu3['id'],$permissions)) checked @endif ></span>
                                                                        <i class="fa fa-minus-circle fa-lg left fa-icon"></i>
                                                                        <span class="menu_title left">{{ $menu3['title'] }}</span>
                                                                        <span class="menu_id left">〖ID：{{ $menu3['id'] }}〗</span>
                                                                        <span class="left en-font">〖权限名称：{{ $menu3['route_name'] }}〗</span>
                                                                        <span class="left en-font">〖方法：{{ $menu3['actions'] }}〗</span>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @endforeach
                      </div>
                    @endif
                </div>
              @endforeach
          </div>
        </div>
    </div>
    </form>
    <div class="admin_bottom"></div>
</div>
@endsection
@section("script")
<script type="text/javascript">
   layui.use(['layer','jquery','form','utils'],function(){
       var $ = layui.$,
           form = layui.form,
           URL = layui.utils.URL,
           layer = layui.layer;

       $('#menu_tree .self').click(function(){
           var level = $(this).data('level');
           var parent = $(this).parent('.menu_level') ;
           $('#menu_tree').find('.isClick').removeClass('isClick');
           parent.addClass('isClick');
           if(parent.hasClass('no_child')) return false ;
           if(parent.hasClass('isOpen'))
               parent.removeClass('isOpen').children('.menu_children').hide().end().children('.self').find('.fa-icon').removeClass('fa-minus-circle').addClass('fa-plus-circle')
           else
               parent.addClass('isOpen').children('.menu_children').show().end().children('.self').find('.fa-icon').removeClass('fa-plus-circle').addClass('fa-minus-circle')
       }).find('a').click(function(e){
           e.stopPropagation();
       })
       $('#menu_tree .self').find('.layui-form-checkbox').click(function(e){
           e.stopPropagation();
       })

       form.on('submit(setPermission)',function(data){
           var url = $(data.form).prop('action');
           URL.post(url,$(data.form).serialize(),{
               success:function(res){
                   if(res.code==1){
                       layer.msg(res.message,{icon:6,time:3000},function(){
                           document.location.href=res.data.redirect;
                       })
                   }else{
                       layer.msg(res.message,{icon:5,time:3000})
                   }
               }
           })
           return false;
       })

       form.on('checkbox',function(data){
           var item = data.elem;
           //调整子级元素
           var menuid = $(data.elem).val();
           var all_children =$(item).parents('.menu_level').eq(0).find('.menu_children').find('input[type=checkbox]');

           all_children.prop('checked',$(item).prop('checked'));
           //调整父级元素
           var parent_str = $(item).data('parents');
           var all_parents = parent_str.toString().split(",");
           var checked = data.elem.checked;
           if(checked){
               for(var i=1;i<all_parents.length;i++){
                   $("input[type=checkbox][value="+all_parents[i]+"]").prop('checked',$(item).prop('checked'));
               }
           }else{
               for(var i=all_parents.length - 1;i>0;i--){
                   var has_checked = $(".parent-checkbox-"+all_parents[i]+":checked").length;
                   if(has_checked<=0){
                       $("input[type=checkbox][value="+all_parents[i]+"]").prop('checked',$(item).prop('checked'));
                   }
               }
           }
           form.render('checkbox')
           $('#menu_tree .self').find('.layui-form-checkbox').click(function(e){
               e.stopPropagation();
           })
       })
   })
</script>
@endsection